<template>
  <div class="department">
    <!-- 查询 -->
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="部门编号">
        <el-input v-model="search.deptNo" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="部门名称">
        <el-input v-model="search.deptName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="负责人">
        <el-input v-model="search.person" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="创建时间" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="search.startTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">一</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="search.endTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchDep" icon="el-icon-search"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset" icon="el-icon-refresh-left"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div style="display: flex">
      <!-- 新增按钮 -->
      <div
        v-has="'add'"
        class="add"
        @click="addDialog"
        style="text-align: left"
      >
        <el-button
          style="font-size: 15px"
          type="primary"
          icon="el-icon-circle-plus"
          >新增部门</el-button
        >
      </div>
      <!-- 批量删除 -->
      <div
        v-has="'del'"
        class="add"
        @click="batchDeleteDialog"
        style="text-align: left; margin-left: 10px"
      >
        <el-button
          style="font-size: 15px"
          type="primary"
          icon="el-icon-delete-solid"
          >批量删除</el-button
        >
      </div>
    </div>
    <!-- table表格 -->
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="num" width="55" label="序号"> </el-table-column>
      <el-table-column prop="deptNo" label="部门编号"> </el-table-column>
      <el-table-column prop="deptName" label="部门名称"> </el-table-column>
      <el-table-column prop="deptOrganizaion" label="所属组织">
      </el-table-column>
      <el-table-column prop="person" label="负责人"> </el-table-column>
      <el-table-column label="联系方式">
        <template slot-scope="scope">
          <span>{{
            scope.row.personPhone == null ? "暂无" : scope.row.personPhone
          }}</span>
        </template>
      </el-table-column>
      <el-table-column width="260" label="创建时间">
        <template slot-scope="scope">
          <span>{{ new Date(scope.row.createTime).toLocaleString() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="userCount" width="120" label="用户数">
      </el-table-column>
      <el-table-column prop="buildingCount" width="120" label="建筑数(楼)">
      </el-table-column>
      <el-table-column v-if="power" fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <div>
            <el-button
              v-has="'edit'"
              @click="editDialog(scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              v-has="'del'"
              @click="delDialog(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </div>
          <!-- <div v-else style="color: red">无权限</div> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="count"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="changePage"
    >
    </el-pagination>
    <Department @render="render" ref="dep"></Department>
  </div>
</template>

<script>
import Department from "@/components/setting/department.vue";
export default {
  components: { Department },
  data() {
    return {
      title: "部门管理",
      count: 5,
      page: 1,
      total: null,
      power: "",
      currentPage4: 4,
      //查询
      search: {
        deptNo: "",
        endTime: "",
        deptName: "",
        startTime: "",
        person: "",
      },
      tableData: [],
    };
  },
  methods: {
    //改变一页显示条数
    handleSizeChange(val) {
      this.count = val;
      this.render();
    },
    //条件查询
    searchDep() {
      this.$axios({
        url: `/queryDeptsByCondition/${this.page}/${this.count}`,
        method: "post",
        data: this.search,
      }).then((res) => {
        console.log("查询成功", res.data.data);
        this.tableData = res.data.data;
        this.tableData.forEach((v, i) => {
          v.num = i + 1;
        });
        this.total = res.data.data.length;
        console.log(this.tableData);
      });
    },
    //重置
    reset() {
      this.search = {};
      this.render();
    },
    // 增加dialog
    addDialog() {
      this.$refs.dep.dialogAddFormVisible = true;
    },
    // 修改dialog
    editDialog(msg) {
      this.$refs.dep.dialogEditFormVisible = true;
      let editList = { ...msg };
      this.$refs.dep.editData = editList;
    },
    //删除dialog
    delDialog(msg) {
      this.$refs.dep.dialogDelFormVisible = true;
      console.log(111, msg.id);
      this.$refs.dep.delId = msg.id;
    },
    //删除dialog
    batchDeleteDialog(msg) {
      if (this.$refs.dep.delIdArr.length == 0) {
        this.$message.error("至少要选中一项才能删除");
        return;
      }
      this.$refs.dep.dialogBatchDelFormVisible = true;
    },
    // 批量删除操作
    handleSelectionChange(val) {
      let idArr = [];
      val.forEach((v) => {
        idArr.push(v.id);
      });
      this.$refs.dep.delIdArr = idArr;
    },
    //改变页数
    changePage(page) {
      this.page = page;
      this.render();
    },
    //渲染
    render() {
      this.$axios({
        url: `/depts/${this.page}/${this.count}`,
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.tableData = res.data.data;
          this.total = Number(res.data.total);
          this.tableData.forEach((v, i) => {
            v.num = i + 1;
          });
          console.log(this.tableData);
        }
      });
    },
  },
  mounted() {
    this.power = this.$store.state.power;
    this.render();
    this.$emit("title", this.title);
  },
};
</script>

<style scoped lang="less">
/deep/.cell {
  text-align: center;
}
.department {
  padding: 40px;
}
.line {
  text-align: center;
}
.el-form {
  text-align: left;
  .el-input {
    width: 180px;
  }
  .el-button {
    padding: 5px 18px 5px 15px;
    height: 40px;
    color: #0a92fa;
    background: #fff;
    &:hover {
      color: #fff;
      background: #0a92fa;
    }
  }
}
.add {
  .el-button {
    padding: 5px 18px 5px 15px;
    height: 40px;
    color: #0a92fa;
    background: #fff;
    &:hover {
      color: #fff;
      background: #0a92fa;
    }
  }
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 50px;
}
</style>